<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>司机订单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="container">
            <template>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs">
                    <el-tab-pane label="全部订单" name="1" width="200px"></el-tab-pane>
                    <el-tab-pane label="运输中订单" name="2"></el-tab-pane>
                    <el-tab-pane label="等待签收" name="3"></el-tab-pane>
                    <el-tab-pane label="已完成订单" name="4"></el-tab-pane>
                </el-tabs>
            </template>
            <div class="list" v-for="item in goodsInf">
                <el-card class="box-card">
                    <el-descriptions class="margin-top" :column="3" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-location-outline"></i>
                                物品名称
                            </template>
                            {{item.goodName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-tickets"></i>
                                货物类型
                            </template>
                            <el-tag size="small">{{item.typeName}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                发货地址
                            </template>
                            {{item.start}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                运输目的地
                            </template>
                            {{item.destination}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                发布时间
                            </template>
                            {{item.driverCreateTime1}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                司机姓名
                            </template>
                            {{item.driverName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                司机车辆类型
                            </template>
                            {{item.carName}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                司机车牌号
                            </template>
                            {{item.carNumber}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                司机备注
                            </template>
                            {{item.driverRemark}}
                        </el-descriptions-item>
                        <el-descriptions-item >
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                司机报价
                            </template>
                            <span style="color: #EAAE3E;font-size: 18px">￥{{item.fees}}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-office-building"></i>
                                订单状态
                            </template>
                            <el-tag effect="plain" size="medium" :type="item.tag_type">{{item.tag_info}}</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-button v-if="item.status == 0" type="primary" class="button_click pull-right" @click="setArrive(item.orderId)">确认到达</el-button>
                </el-card>
            </div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    :current-page= "page.current"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="page.size"
                    layout = "total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    style="margin-bottom: 30px">
            </el-pagination>
        </div>
    </div>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            activeName: '1',
            tag_type:'',
            tag_info:'',
            goodsInf: [],
            tab: '',
            page: {
                //当前页
                current: 1,
                //最大页数
                total: '',
                size:10
            }
        },
        methods: {
            handleClick(tab, event) {
                this.tab = tab.name
                this.getOrders(tab.name)
            },
            getOrders(status) {
                let that = this
                if (status === null) {
                    status = 1
                }
                let data = {
                    "pageRequest": {
                        "current": 1,
                        "size": 10
                    },
                    status: status
                }
                getPostData(apiUrls.orders.selectDriverOrders,data,'post',function (data) {
                    if (data.msg === 'success') {
                        that.goodsInf = data.data.records
                        that.page.total = data.data.total
                        //遍历设置标签状态和按钮
                        that.goodsInf.forEach((good,index) => {
                            switch (good.status) {
                                case 0: {
                                    that.goodsInf[index].tag_type = 'primary'
                                    that.goodsInf[index].tag_info = '正在运输'
                                    break
                                }
                                case 1: {
                                    that.goodsInf[index].tag_type = 'warning'
                                    that.goodsInf[index].tag_info = '已到达目的地'
                                    break
                                }
                                case 2: {
                                    that.goodsInf[index].tag_type = 'success'
                                    that.goodsInf[index].tag_info = '运输完成'
                                    break
                                }
                            }
                        })
                    } else {
                        this.$message({
                            message: data.msg(),
                            type: 'error'
                        });
                    }
                })
            },
            setArrive(orderId) {
                let that = this
                that.$confirm('您确定确认收货吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        "orderId": orderId,
                        status: 1
                    }
                    getPostData(apiUrls.orders.modifyOrders, data, 'post', function (result) {
                        if (result.msg === 'success') {
                            that.$message({
                                message: "修改成功",
                                type: 'success'
                            });
                            that.getOrders(that.tab)
                        } else {
                            that.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    })
                })
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.size = size;
                console.log(this.page.size)  //每页下拉显示数据
                this.getGoods()
            },
            handleCurrentChange: function(currentPage){
                this.page.current = currentPage;
                console.log(this.page.current)  //点击第几页
                this.getGoods()
            },
        },
        mounted() {
            this.getOrders()
        }
    })
</script>
</body>
</html>